﻿<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>思格意 - 一个Java程序员的个人博客网站</title>
    <link rel="shortcut icon" href="/icon/favicon.png" type="image/x-icon">
    <!--Layui-->
    <link href="/layui/css/layui.css" rel="stylesheet" />
    <!--font-awesome-->
    <link href="/js/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!--全局样式表-->
    <link href="/css/global.css" rel="stylesheet" />
    <!-- 本页样式表 -->
    <link href="/css/home.css" rel="stylesheet" />
</head>
<body>
    <div id="workingArea">


    <!-- 导航 -->
    <nav class="blog-nav layui-header">
        <div class="blog-container">
            <!--&lt;!&ndash; QQ互联登陆 &ndash;&gt;-->
            <!--<a href="javascript:;" class="blog-user">-->
                <!--<i class="fa fa-qq"></i>-->
            <!--</a>-->
            <!--<a href="javascript:;" class="blog-user layui-hide">-->
                <!--<img src="../images/Absolutely.jpg" alt="Absolutely" title="Absolutely" />-->
            <!--</a>-->
            <!-- 不落阁 -->
            <a class="blog-logo" href="home.html"><img src="/icon/headPicture.png" style="height:53px;margin-bottom: 4px"/>思革意—个人博客</a>
            <!-- 导航菜单 -->
            <ul class="layui-nav" lay-filter="nav">
                <li class="layui-nav-item layui-this">
                    <a href="home.html"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="article.html"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
                </li>
                <!-- <li class="layui-nav-item">
                    <a href="resource.html"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                </li> -->
                <li class="layui-nav-item">
                    <a href="timeline.html"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
                </li>
                <li class="layui-nav-item">
                    <a href="about.html"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
                </li>
            </ul>
            <!-- 手机和平板的导航开关 -->
            <a class="blog-navicon" href="javascript:;">
                <i class="fa fa-navicon"></i>
            </a>
        </div>
    </nav>

    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">
        <!-- canvas -->
        <canvas id="canvas-banner" style="background: #393D49;"></canvas>
        <!--为了及时效果需要立即设置canvas宽高，否则就在home.js中设置-->
        <script type="text/javascript">
            var canvas = document.getElementById('canvas-banner');
            canvas.width = window.document.body.clientWidth - 10;//减去滚动条的宽度
            if (screen.width >= 992) {
                canvas.height = window.innerHeight * 1 / 3;
            } else {
                canvas.height = window.innerHeight * 2 / 7;
            }
        </script>
        <!-- 这个一般才是真正的主体内容 -->
        <div class="blog-container">
            <div class="blog-main">
                <!-- 网站公告提示 -->
                <div class="home-tips shadow">
                    <i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
                    <div class="home-tips-container">
                        <span style="color: #009688">思革意 &nbsp;—— &nbsp;一个Java程序员的个人博客，新版网站采用Layui为前端框架，目前正在建设中！</span>
                        <span style="color: #009688">内容与功能将逐渐丰富起来，情景期待！</span>
                    </div>
                </div>

                <!--左边文章列表-->
                <div class="blog-main-left">
                    <div id="top">
                    </div>
                    <div id="flow">
                    </div>
                </div>
                <!--右边小栏目-->
                <div class="blog-main-right">
                	
                    <div class="blogerinfo shadow">
                        <div class="blogerinfo-figure">
                            <img id="imageName" src="" alt="Absolutely" height="240" width="176"/>
                        </div>
                        <p class="blogerinfo-nickname">{{blogger.nickName }}</p>
                        <p class="blogerinfo-introduce">{{blogger.sign}}</p>
                        <p class="blogerinfo-location"><i class="fa fa-location-arrow"></i>&nbsp;辽宁 - 沈阳</p>
                        <hr />
                        <!-- <div class="blogerinfo-contact">
                            <a target="_blank" title="QQ交流" href="javascript:layer.msg('启动QQ会话窗口')"><i class="fa fa-qq fa-2x"></i></a>
                            <a target="_blank" title="给我写信" href="javascript:layer.msg('启动邮我窗口')"><i class="fa fa-envelope fa-2x"></i></a>
                            <a target="_blank" title="新浪微博" href="javascript:layer.msg('转到你的微博主页')"><i class="fa fa-weibo fa-2x"></i></a>
                            <a target="_blank" title="码云" href="javascript:layer.msg('转到你的github主页')"><i class="fa fa-git fa-2x"></i></a>
                        </div> -->
                    </div>
                    
                    <div></div><!--占位-->
                    <div class="blog-module shadow">
                        <div class="blog-module-title">热文排行</div>
                        <ul class="fa-ul blog-module-ul" id="popularAticale">
                        </ul>
                    </div>
                    <div class="blog-module shadow">
                        <div class="blog-module-title">标签</div>
                        <ul class="blogroll" id="tag">
                        </ul>
                    </div>
                    <!--<div class="blog-module shadow">-->
                        <!--<div class="blog-module-title">最近分享</div>-->
                        <!--<ul class="fa-ul blog-module-ul">-->
                            <!--<li><i class="fa-li fa fa-hand-o-right"></i><a href="http://pan.baidu.com/s/1c1BJ6Qc" target="_blank">Canvas</a></li>-->
                            <!--<li><i class="fa-li fa fa-hand-o-right"></i><a href="http://pan.baidu.com/s/1kVK8UhT" target="_blank">pagesize.js</a></li>-->
                            <!--<li><i class="fa-li fa fa-hand-o-right"></i><a href="https://pan.baidu.com/s/1mit2aiW" target="_blank">时光轴</a></li>-->
                            <!--<li><i class="fa-li fa fa-hand-o-right"></i><a href="https://pan.baidu.com/s/1nuAKF81" target="_blank">图片轮播</a></li>-->
                        <!--</ul>-->
                    <!--</div>-->
                    <div class="blog-module shadow">
                        <div class="blog-module-title">友情链接</div>
                        <ul class="blogroll" id="links">
                        </ul>
                    </div>
                    <div class="blog-module shadow">
                        <div class="blog-module-title">最近更新</div>
                        <dl class="footprint" id="recentUpdateDL">
                        </dl>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="blog-footer">
        <p><span>Copyright</span><span>&copy;</span><span>2019</span><a href="http://www.lyblogs.cn">思革意</a><span>Design By Clark</span></p>
        <p><a href="http://www.miibeian.gov.cn/" target="_blank">辽ICP备19004218号-1</a></p>
    </footer>
    <!--侧边导航-->
    <ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
        <li class="layui-nav-item layui-this">
            <a href="home.html"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
        </li>
        <li class="layui-nav-item">
            <a href="/article"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
        </li>
        <li class="layui-nav-item">
            <a href="resource.html"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
        </li>
        <li class="layui-nav-item">
            <a href="timeline.html"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
        </li>
        <li class="layui-nav-item">
            <a href="about.html"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
        </li>
    </ul>
    <!--分享窗体-->
<!--     <div class="blog-share layui-hide">
        <div class="blog-share-body">
            <div style="width: 200px;height:100%;">
                <div class="bdsharebuttonbox">
                    <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                    <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                    <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                    <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                </div>
            </div>
        </div>
    </div> -->
    <!--遮罩-->
    <div class="blog-mask animated layui-hide">
    </div>
    <!-- layui.js -->
    <script type="text/javascript" src="/layui/layui.js"></script>
    <!-- 全局脚本 -->
    <script type="text/javascript" src="/js/forepage/global.js"></script>
    <!-- 本页脚本 -->
    <script type="text/javascript" src="/js/forepage/home.js"></script>
    </div>
    <script type="text/javascript" src="/js/moment/2.22.2/moment.js"></script>
    <script type="text/javascript" src="/js/axios/0.17.1/axios.min.js"></script>
    <script type="text/javascript" src="/js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="/js/vue/2.5.16/vue.min.js"></script>
    <script>
        $(function () {
            var data4Vue={
                uri:"",
                beans:[],
                bean:{},
                blogger:{}
            }
            var vue = new  Vue({
                el:"#workingArea",
                data:data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                	this.bloggerInfo();
                },
                methods:{
                    bloggerInfo:function(){
                    	axios.get("/personal_blog/bloggers/1").then(function(res){
                    		vue.blogger = res.data;
                    		$("#imageName").attr("src",vue.blogger.imageName);
                    	})
                    }
                },
                filters:{
                    formmatTime:function(value){
                        return  moment(value).format('YYYY-MM-DD HH:mm:ss').substring(0,10)
                    }
                }
            })
            axios.get("/personal_blog/blogsTop").then(function (res) {
                var beans = res.data;
                for(var i in beans){
                    var divArticle = '<div class="article shadow">';
                    divArticle+='<div class="article-left" style="width:180px;height:100px">';
                    divArticle+='<img src="'+beans[i].newsFaceImg+'" alt="基于laypage的layui扩展模块（pagesize.js）！" style="width:100%;height:100%" />';
                    divArticle+='</div>';
                    divArticle+='<div class="article-right">';
                    divArticle+='<div class="article-title">';
                    divArticle+='<b><a href="detail.html?id='+beans[i].id+'">';
                    divArticle+=beans[i].title;
                    divArticle+='</a>&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-zhiding" style="color: red;font-size:20px;text-align:right" data-icon="icon-zhiding"></i></b>';
                    divArticle+='</div>';
                    divArticle+='<div class="article-abstract">';
                    divArticle+=beans[i].summary;
                    divArticle+='</div>';
                    divArticle+='</div>';
                    divArticle+='<div class="clear"></div>';
                    divArticle+='<div class="article-footer">';
                    var time = moment(beans[i].releaseDate).format('YYYY-MM-DD HH:mm:ss').substring(0,10);
                    divArticle+='<span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;'+time+'</span>';
                    divArticle+='<span class="article-author" ><i class="fa fa-user"></i>&nbsp;&nbsp;'+beans[i].newsAuthor+'</span>';
                    divArticle+='<span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="/personal_blog/article?typeId='+beans[i].typeId+'&typeName='+beans[i].typeName+'">'+beans[i].typeName+'</a></span>';
                    divArticle+='<span><i class="fa fa-hashtag"></i>&nbsp;&nbsp;';
                    var tagList = beans[i].tagList;
                    console.log(tagList)
                    for(var j in tagList){
                    	
                    	divArticle += '<a href="tag.html?tagId='+tagList[j].id+'&tagName='+tagList[j].tagName+'" style="padding:2px 4px;background-color:#009688;border-radius:2px;color:white;font-weight:bold">'+tagList[j].tagName+'</a>&nbsp;';
                    }
                    divArticle += '</span>';
                    divArticle+='<span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;'+beans[i].clickHit+'</span>';
                    divArticle+='<span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;'+beans[i].replyHit+'</span>';
                    divArticle+='</div></div>';

                    $("#top").append($(divArticle));
                }
            })




            var pageSize = 10;
            var pageIndex = 0;
			//layui实现流加载博客列表
            layui.use('flow', function () {
                var $ = layui.jquery;
                var flow = layui.flow;
                flow.load({
                    elem: '#flow',//存放每条数据的容器
                    done: function (pageIndex, next) { //到达临界点（默认滚动触发），触发下一页
                        var lis = [];
                        $.get('/personal_blog/blogs/listByPageNoTop?page='+pageIndex+"&limit="+pageSize, function(res){
                            layui.each(res.data, function(index, item){
                                var divArticle = '<div class="article shadow" >';
                                divArticle+='<div class="article-left" style="width:180px;height:100px">';
                                divArticle+='<img src="'+item.newsFaceImg+'" alt="基于laypage的layui扩展模块（pagesize.js）！" style="width:100%;height:100%" />';
                                divArticle+='</div>';
                                divArticle+='<div class="article-right">';
                                divArticle+='<div class="article-title">';
                                divArticle+='<b><a href="detail.html?id='+item.id+'">';
                                divArticle+=item.title;
                                divArticle+='</a></b>';
                                divArticle+='</div>';
                                divArticle+='<div class="article-abstract">';
                                divArticle+=item.summary;
                                divArticle+='</div>';
                                divArticle+='</div>';
                                divArticle+='<div class="clear"></div>';
                                divArticle+='<div class="article-footer">';
                                var time = moment(item.releaseDate).format('YYYY-MM-DD HH:mm:ss').substring(0,10);
                                divArticle+='<span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;'+time+'</span>';
                                divArticle+='<span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;'+item.newsAuthor+'</span>';
                                divArticle+='<span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="/personal_blog/article?typeId='+item.typeId+'&typeName='+item.typeName+'">'+item.typeName+'</a></span>';
                                divArticle+='<span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;'+item.clickHit+'</span>';
                                divArticle+='<span><i class="fa fa-hashtag"></i>&nbsp;&nbsp;';
                                var tagList = item.tagList;
                               	
                                for(var j in tagList){
                                	if(tagList[j] != null){
	                                	divArticle += '<a href="tag.html?tagId='+tagList[j].id+'&tagName='+tagList[j].tagName+'" style="padding:2px 4px;background-color:#009688;border-radius:2px;color:white;font-weight:bold">'+tagList[j].tagName+'</a>&nbsp;';
                                	}
                                }
                                divArticle += '</span>';
                                divArticle+='<span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;'+item.replyHit+'</span>';
                                divArticle+='</div></div>';
                                lis.push(divArticle);
                            });
                            next(lis.join(''), pageIndex < res.pages);
                        })
                    }
                });
            });

        })

    </script>
</body>
</html>